
// shooting_game/frontend/js/main.js
document.addEventListener('DOMContentLoaded', function() {
  // 粒子效果初始化
  if (typeof particlesJS !== 'undefined') {
    particlesJS('particles-js', {
      particles: {
        number: { value: 80, density: { enable: true, value_area: 800 } },
        color: { value: "#ffffff" },
        shape: { type: "circle" },
        opacity: { value: 0.5, random: true },
        size: { value: 3, random: true },
        line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 },
        move: { enable: true, speed: 3, direction: "none", random: true, straight: false, out_mode: "out" }
      }
    });
  }

  // 移动端菜单切换
  const mobileMenuBtn = document.querySelector('button.md-hidden');
  if (mobileMenuBtn) {
    mobileMenuBtn.addEventListener('click', function() {
      const nav = document.querySelector('.hidden.md\\:flex');
      nav.classList.toggle('hidden');
      nav.classList.toggle('flex');
      nav.classList.toggle('flex-col');
      nav.classList.toggle('absolute');
      nav.classList.toggle('top-16');
      nav.classList.toggle('left-0');
      nav.classList.toggle('right-0');
      nav.classList.toggle('bg-white');
      nav.classList.toggle('p-4');
      nav.classList.toggle('space-y-4');
      nav.classList.toggle('space-x-8');
      nav.classList.toggle('shadow-md');
    });
  }

  // 作品轮播效果
  const workCards = document.querySelectorAll('.work-card');
  if (workCards.length > 0) {
    workCards.forEach(card => {
      card.addEventListener('mouseenter', function() {
        this.style.transform = 'scale(1.05)';
        this.style.boxShadow = '0 10px 20px rgba(0,0,0,0.2)';
      });
      
      card.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1)';
        this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.1)';
      });
    });
  }

  // 按钮点击效果
  const buttons = document.querySelectorAll('button, .btn');
  buttons.forEach(btn => {
    btn.addEventListener('mousedown', function() {
      this.style.transform = 'translateY(2px)';
    });
    
    btn.addEventListener('mouseup', function() {
      this.style.transform = 'translateY(0)';
    });
    
    btn.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0)';
    });
  });

  // 页面滚动动画
  const animateOnScroll = function() {
    const elements = document.querySelectorAll('.animate-on-scroll');
    elements.forEach(el => {
      const elementPosition = el.getBoundingClientRect().top;
      const windowHeight = window.innerHeight;
      
      if (elementPosition < windowHeight - 100) {
        el.classList.add('animated');
      }
    });
  };

  window.addEventListener('scroll', animateOnScroll);
  animateOnScroll();

  // 作品详情弹窗
  const workDetailBtns = document.querySelectorAll('.work-card button');
  workDetailBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const card = this.closest('.work-card');
      const title = card.querySelector('h3').textContent;
      const description = card.querySelector('p').textContent;
      
      const modal = document.createElement('div');
      modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4';
      modal.innerHTML = `
        <div class="bg-white rounded-xl p-6 max-w-md w-full animate-fade-in">
          <h3 class="text-2xl font-bold mb-4 text-pink-500">${title}</h3>
          <p class="text-gray-700 mb-6">${description}</p>
          <p class="text-gray-500 text-sm mb-6">更多详情功能正在开发中...</p>
          <button class="px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300 transition">
            关闭
          </button>
        </div>
      `;
      
      document.body.appendChild(modal);
      
      modal.querySelector('button').addEventListener('click', function() {
        modal.classList.add('opacity-0', 'transition-opacity', 'duration-300');
        setTimeout(() => modal.remove(), 300);
      });
    });
  });

  // 随机颜色生成器
  function getRandomColor() {
    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFBE0B', '#FF9F1C', '#A37AFC'];
    return colors[Math.floor(Math.random() * colors.length)];
  }

  // 为标题添加随机颜色
  const headings = document.querySelectorAll('h1, h2, h3');
  headings.forEach(heading => {
    heading.style.color = getRandomColor();
  });
});
